<template>
  <div class="from">
    <div class="title">
      {{$t('ImageTag_Markimage')}}
<!--      标记镜像-->
    </div>
    <button @click="changeAddShow(0)" class="btn btn1 margin20" :class="addShow === 0 ? 'btnActive' : ''">{{$t('ImageTag_simple')}}</button>
    <button @click="changeAddShow(1)" class="btn btn2" :class="addShow === 1 ? 'btnActive' : ''">{{$t('ImageTag_senior')}}</button>
    <div class="addbox" v-show="addShow === 0">
      <SimpleAdd @success="success" :imageId="Image.Id"></SimpleAdd>
    </div>
    <div class="addbox" v-show="addShow === 1">
      <SeniorAdd @success="success" :imageId="Image.Id"></SeniorAdd>
    </div>
  </div>
</template>

<script>
import SeniorAdd from '@/components/imageContent/SeniorAdd'
import SimpleAdd from '@/components/imageContent/SimpleAdd'
export default {
  data () {
    return {
      addShow: 0 // 控制高级拉取还是简单拉取镜像
    }
  },
  props: ['Image'],
  methods: {
    // 显示高级添加还是简单添加
    changeAddShow (id) {
      this.addShow = id
    },
    success () {
      this.$emit('success')
    }
  },
  components: {
    SeniorAdd,
    SimpleAdd
  }
}
</script>

<style lang="scss" scoped>
.from{
  margin-top: 30px;
}
.btn{
  padding: 6px 15px;
  background: #067FB5;
  font-size: 12px;
  color: #fff;
}
.btnActive{
  background: #286090;
}
.btn1{
  border-radius: 5px 0px 0px 5px;
}
.btn2{
  border-radius: 0px 5px 5px 0px;
}
.addbox{
  margin-top: 25px;
}
</style>
